<template>
  <div class="treatment-detail">
    <div class="back-content">
      <div class="back" @click="backClick">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </div>
      <div class="title">XX医疗服务 | 丰台区</div>
    </div>
    <div class="treatment-increase">
      <div class="search">
        <el-form :inline="true" label-position="right" :model="formData" ref="validateForm">
          <div class="line">
            <el-form-item label="时间">
              <el-date-picker
                name="pub-time"
                v-model="formData.time"
                type="month"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="险种">
              <el-select
                v-model="formData.insuranceType"
                placeholder="请选择险种"
                clearable
              >
                <el-option
                  v-for="item in insuranceTypes"
                  :key="item.dictCode"
                  :label="item.dictValue"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门特病名称">
              <el-select
                v-model="formData.medicalType"
                placeholder="请选择就诊类型"
                clearable
              >
                <el-option
                  v-for="item in medicalTypes"
                  :key="item.dictCode"
                  :label="item.dictValue"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item></el-form-item>
            <el-form-item class="confirm-reset">
              <el-button class="reset" @click="resetClick">重置</el-button>
              <el-button type="primary" class="confirm" @click="searchClick">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table-list">
        <div class="title-content">
          <div class="title">“xx医疗服务”按具体医疗机构费用分析</div>
          <el-button type="primary" class="export" @click="exportClick">导出</el-button>
        </div>
        <Table :tableData="tableData" :loading="loading" @pageChange="pageChange" :pageIndex="pageIndex" @current="currentIndex"></Table>
      </div>
    </div>
  </div>
</template>

<script>
import Table from "@/components/medicalAnalysis/Table.vue";
import { mapState } from "vuex";

export default {
  components: {
    Table,
  },
  data() {
    return {
      formData: {
        time: '',
        insuranceType: '',
        medicalType: '',
        region: '',
        hospitalLevel: '',
        hospitalType: '',
        specializedType: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      sort: '', //排序字段 按照field1 asc, field2 desc格式展示
      currentPage: 1,
      pageSize: 10, //每页展示条数
      loading: false,
      pageIndex: 2, //翻页索引
      dialogVisible: false,
      dialogTitle: "“xx医疗服务”使用情况变化趋势",
      insuranceTypes: [
        {
          dictCode: '1',
          dictValue: '甲类'
        },
        {
          dictCode: '2',
          dictValue: '乙类'
        },
        {
          dictCode: '3',
          dictValue: '丙类'
        }
      ],
      medicalTypes: [
        {
          dictCode: '1',
          dictValue: '增补'
        },
        {
          dictCode: '2',
          dictValue: '废止'
        }
      ],
      regions: [
        {
          dictCode: '1',
          dictValue: '丰台区'
        },
        {
          dictCode: '2',
          dictValue: '朝阳区'
        },
      ],
      hospitalLevels: [
        {
          dictCode: '1',
          dictValue: '全部'
        },
        {
          dictCode: '2',
          dictValue: '一等级'
        },
      ],
      hospitalTypes: [
        {
          dictCode: '1',
          dictValue: '全部'
        },
        {
          dictCode: '2',
          dictValue: '类型1'
        },
      ],
      specializedTypes: [
        {
          dictCode: '1',
          dictValue: '全部'
        },
        {
          dictCode: '2',
          dictValue: '专科1'
        },
      ],
      tableData: {
        header: [
          { chnColName: '项目编码', engColName: 'itemCode', sort: 0 }, //sort：0 非排序字段  1 需要排序的字段
          { chnColName: '物价编码', engColName: 'pricCode', sort: 0 },
          { chnColName: '项目名称', engColName: 'itemName', sort: 0 },
          { chnColName: '项目内容（内涵）', engColName: 'itemCont', sort: 0 },
          { chnColName: '除外内容', engColName: 'exctCont', sort: 0 },
          { chnColName: '计价单位', engColName: 'prcunt', sort: 0 },
          { chnColName: '计价说明', engColName: 'pricDscr', sort: 0 },
          { chnColName: '项目价格（元）', engColName: 'itemPric', sort: 1 },
          { chnColName: '医保类别', engColName: 'medinscat', sort: 0 },
          { chnColName: '工伤保险类别', engColName: 'injrInsuType', sort: 0 },
          { chnColName: '有效标志', engColName: 'valiFlag', sort: 0 },
          { chnColName: '政策文件编号', engColName: 'polFileNo', sort: 0 },
          { chnColName: '政策文件名称', engColName: 'polFileName', sort: 0 },
          { chnColName: '政策发布时间', engColName: 'polFilePubdTime', sort: 1 },
          { chnColName: '备注', engColName: 'memo', sort: 0 }
        ],
        list: [
          {
            id: 1,
            itemCode: '项目编码123',
            pricCode: 'xxxx',
            itemName: 'xxxx',
            itemCont: 'xxxx',
            exctCont: 'xxxx',
            prcunt: 'xxxx',
            pricDscr: 'xxxx',
            itemPric: 'xxxx',
            medinscat: 'xxxx',
            injrInsuType: 'xxxx',
            valiFlag: 'xxxx',
            polFileNo: 'xxxx',
            polFileName: 'aadfaste',
            polFilePubdTime: 'xxxx',
            memo: 'xxxx'
          },
          {
            id: 2,
            itemCode: 'bbb',
            pricCode: 'aaaa',
            itemName: 'aaaa',
            itemCont: 'aaaa',
            exctCont: 'aaaa',
            prcunt: 'aaaa',
            pricDscr: 'aaaa',
            itemPric: 'aaaa',
            medinscat: 'aaaa',
            injrInsuType: 'aaaa',
            valiFlag: 'aaaa',
            polFileNo: 'aaaa',
            polFileName: 'xxxxxxxxx',
            polFilePubdTime: 'aaaa',
            memo: 'aaaa'
          }
        ],
        totalDataCount: 71
      }
    }
  },
  computed: {
    ...mapState({
      operationPage: state=>state.user.operationPage,
    })
  },
  activated() {
    console.log("进入detail。。。。。。",this.operationPage);
    this.searchClick();
  },
  methods: {
    backClick() {
      this.$emit('current', 1)
    },
    // 重置
    resetClick() {
      (this.formData = {
        time: '',
        insuranceType: '',
        medicalType: '',
        medicalName: ''
      }),
        (this.sort = '')
    },
    searchClick() {
      this.currentPage = 1
      this.searchData = JSON.parse(JSON.stringify(this.formData))
      this.searchList()
    },
    searchList() {
      this.loading = true //加载中。。。
      const params = {
        ...this.searchData,
        pagenum: this.currentPage,
        pagecount: this.pageSize,
        sort: this.sort
      }
      console.log('111111', params)
      setTimeout(() => {
        this.loading = false
      }, 1000);
      // treatmentServList(params).then(res=>{
      //   // console.log("ssssssssssssssss",res);
      //   this.tableData = res.data;
      //   this.loading = false;
      // }).catch(err=>{
      //   console.log(err);
      // })
    },
    currentIndex(index) {
      console.log("666666666666666",index+1);
      // this.dialogVisible = true;
    },
    pageChange(val) {
      console.log("pageChange===",val);
      this.sort = val.sort;
      this.currentPage = val.currentPage;
      this.pageSize = val.pageSize;
      this.searchList()
    },
    exportClick() {
      console.log('导出。。。。。')
    }
  }
}
</script>

<style lang="less" scoped>
@import url('@/assets/common/global_deep_style.less');
@import url('./index.less');

.treatment-detail {
  .back-content {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background: #fff;
    font-size: 14px;
    color: #303133;
    padding: 0 16px;
    box-sizing: border-box;
    .back {
      height: 16px;
      line-height: 16px;
      float: left;
      padding-right: 11.5px;
      border-right: 1px solid #DCDFE6;
      display: flex;
      align-items: center;
      cursor: pointer;
      i {
        color: #606266;
        font-size: 18px;
      }
      span {
        margin-left: 2px;
        font-size: 14px;
      }
    }
    .title {
      font-family: "PingFangSC-Medium";
      font-size: 18px;
      font-weight: 500;
      padding-left: 11.5px;
    }
  }
}
</style>